/*
 * This file is part of Avenge <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Avenge is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Avenge is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
 */

*
{
  font-family: 'Lucida Grande', 'Segoe UI', Ubuntu, Tahoma, Arial, sans-serif;
  font-size: 11px;
  box-sizing: border-box;
}

html
{
  height: 100%;
  overflow: hidden;
}

a
{
  color: inherit;
}

body
{
  margin: 0;
  color: #303942;
  display: flex;
  height: 100%;
  flex-direction: column;
}

body.default
{
  background-color: #ffffff;
}

body.dark
{
  color: #ffffff;
}

table
{
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

table *
{
  overflow: hidden;
  text-overflow: ellipsis;
}

td
{
  padding: 3px;
  white-space: nowrap;
  border-left: 1px solid #cdcdcd;
}

td:first-child
{
  border-left-style: none;
}

col:nth-child(2)
{
  width: 115px;
}

col:nth-child(3)
{
  width: 50%;
}

header
{
  overflow-y: scroll;
  border-bottom: 1px solid #cdcdcd;
  flex-shrink: 0;
}

/*
 * We have to add a scrollbar to the header to have the columns there aligned
 * with the table below. But we don't want the scrollbar to be visible there.
 */
header::-webkit-scrollbar
{
  visibility: hidden;
}

#items
{
  overflow-y: scroll;
  flex-grow: 1;
}

#items table
{
  line-height: 17px;

  /* This background image gives every other row a gray background.
   * This is simlar to "tr:nth-child(odd) background-color: #eee;".
   * However, we can't do it that way, since some rows might be hidden.
   */
  background-image: url();
  background-repeat: repeat;
}

body.dark #items table
{
  background-image: url();
}

#items tr
{
  height: 40px;
}

#items tr[data-state=blocked]
{
  color: red;
}

body.dark #items tr[data-state=blocked]
{
  color: #ff3a3a;
}

#items tr[data-state=whitelisted]
{
  color: green;
}

body.dark #items tr[data-state=whitelisted]
{
  color: #389c22;
}

#items[data-filter-state=blocked]       tr:not([data-state=blocked]),
#items[data-filter-state=whitelisted]   tr:not([data-state=whitelisted])
{
  display: none;
}

.changed, .unnamed
{
  font-style: italic
}

.request-wrapper, .filter-wrapper
{
  display: flex;
  height: 100%;
  flex-direction: column;
}

tr:not(:hover) .action
{
  display: none;
}

.url
{
  width: 100%;
}

.rewritten-url > a,
.resource-link
{
  text-decoration: none;
}

.rewritten-url > a:hover,
.resource-link:hover
{
  text-decoration: underline;
}

.action-wrapper
{
  display: flex;
  width: 100%;
}

.action
{
  background: #555;
  color: white;
  font-style: normal;
  border-radius: 7px;
  padding: 2px 6px;
  margin: auto;
  margin-left: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

.filter-wrapper, .filter, .origin, .domain
{
  flex-grow: 1;
}

.domain, .origin,
.changed .request-wrapper,
.changed .filter-wrapper,
.changed .type
{
  opacity: 0.6;
}

footer
{
  width: 100%;
  height: 23px;
  margin-bottom: -23px;
  padding: 4px 3px;
  border-top: 1px solid #cdcdcd;
  flex-shrink: 0;
}

.has-changes + footer
{
  margin-bottom: 0;
  transition: margin-bottom 0.5s;
}

#reload
{
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.filtered-by-search
{
  display: none;
}

body.dark #reload
{
  color: #2a67e7;
}
